<template>
	<view class="video-page">
		<!-- 头部导航 -->
		<view class="video-header">
			<view class="header-left" @click="goBack">
				<text class="iconfont icon-back" style="color: #fff;">←</text>
			</view>
			<view class="header-title">视频课程</view>
			<view class="header-right">
				<!-- <text class="iconfont icon-share"></text> -->
			</view>
		</view>

		<!-- 视频播放器 -->
		<view class="video-container">
			<video-player :videoUrl="currentVideo.url"></video-player>
		</view>

		<!-- 视频信息 -->
		<view class="video-info">
			<view class="video-title">{{currentVideo.title}}</view>
			<view class="video-stats">
				<text class="stat-item">{{currentVideo.views}}次观看</text>
				<text class="stat-item">{{currentVideo.date}}</text>
			</view>
			<view class="video-desc">{{currentVideo.description}}</view>
		</view>

		<!-- 课程视频列表 -->
		<view class="chapter-list">
			<view class="chapter-title">课程目录</view>
			<view class="chapter-item" v-for="(chapter, index) in chapterList" :key="index" @click="playChapterVideo(chapter)">
				<view class="chapter-item-left">
					<text class="chapter-index">{{index + 1}}</text>
					<view class="chapter-info">
						<text class="chapter-name">{{chapter.zhangjiemingcheng}}</text>
						<text class="chapter-duration">{{chapter.duration || '00:00'}}</text>
					</view>
				</view>
				<view class="chapter-item-right">
					<text class="play-status" :class="{'active': currentVideo.id === chapter.id}">
						{{currentVideo.id === chapter.id ? '正在播放' : '播放'}}
					</text>
				</view>
			</view>
		</view>

		<!-- 视频列表 -->
		<view class="video-list">
			<view class="list-title">课程列表</view>
			<view class="video-item" v-for="video in videoList" :key="video.id" @click="playVideo(video)">
				<image class="video-thumbnail" :src="video.thumbnail" mode="aspectFill"></image>
				<view class="video-item-info">
					<text class="video-item-title">{{video.title}}</text>
					<text class="video-item-desc">{{video.description}}</text>
					<view class="video-item-stats">
						<text class="stat-item">{{video.views}}次观看</text>
						<text class="stat-item">{{video.date}}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 提示信息弹窗 -->
		<uni-popup ref="message" type="message">
			<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
		</uni-popup>
	</view>
</template>

<script>
import VideoPlayer from '../index/components/video-player.vue'
import request from '@/common/request.js'
import { Platform } from "@/static/config.js"

export default {
	components: {
		VideoPlayer
	},
	data() {
		return {
			currentVideo: {
				id: '',
				title: '',
				url: '',
				description: '',
				views: 0,
				date: '',
				thumbnail: ''
			},
			chapterList: [],
			videoList: [],
			// 提示信息弹窗
			msgType: 'success',
			messageText: '这是一条成功提示',
			type: 'center',
		}
	},
	onLoad(options) {
		this.currentVideo = {
			id: '',
			title: '',
			url: '',
			description: '',
			views: 0,
			date: '',
			thumbnail: ''
		}
		if (options.id) {
			this.fetchVideoDetails(options.id)
			this.fetchRelatedVideos(options.id)
		}
	},
	methods: {
		fetchVideoDetails(videoId) {
			request({
				url: Platform.api_requestUrl + '/treatment/kecheng/' + videoId,
				method: 'GET',
			}).then(response => {
				if (response.code == 200) {
					if (response.data.treatmentKechengZhangjieList?.length < 1) {
						uni.showToast({
							title: '暂无视频权限,请联系管理员申请!',
							icon: 'none'
						})
						return
					}
					
					const videoData = response.data
					this.chapterList = videoData.treatmentKechengZhangjieList.map(chapter => ({
						id: chapter.kczjId,
						zhangjiemingcheng: chapter.zhangjiemingcheng,
						shipinlujing: chapter.shipinlujing,
						duration: chapter.duration || '00:00',
						videoId: videoId,
						title: videoData.kechengmingcheng,
						description: videoData.kechengxiangqing,
						url: Platform.api_requestUrl + '/common/getVideoUrl?videoPath=' + chapter.shipinlujing,
						views: videoData.views || 0,
						date: videoData.createTime || '',
						thumbnail: videoData.fengmianlujing ? Platform.api_requestUrl + '/' + videoData.fengmianlujing : ''
					}))

					const currentChapter = this.chapterList[0]
					this.currentVideo = currentChapter;
					// {
					// 	id: videoId,
					// 	title: videoData.kechengmingcheng,
					// 	description: videoData.kechengxiangqing,
					// 	url: Platform.api_requestUrl + '/common/getVideoUrl?videoPath=' + currentChapter.shipinlujing,
					// 	views: videoData.views || 0,
					// 	date: videoData.createTime || '',
					// 	thumbnail: videoData.fengmianlujing ? Platform.api_requestUrl + '/' + videoData.fengmianlujing : ''
					// }
				} else {
					uni.showToast({
						title: response.msg,
						icon: 'none'
					})
				}
			}).catch(error => {
				uni.showToast({
					title: '获取视频失败',
					icon: 'none'
				})
			})
		},
		messageToggle(type, msg) {
			this.msgType = type;
			this.messageText = msg;
			this.$refs.message.open();
		},
		fetchRelatedVideos(currentVideoId) {
			request({
				url: Platform.api_requestUrl + '/treatment/kecheng/list',
				data: {
					pageNum: 1,
					pageSize: 10
				},
				method: 'GET',
			}).then(response => {
				if (response.code == 200) {
					this.videoList = response.rows
						.filter(video => video.kcId !== currentVideoId)
						.map(video => ({
							id: video.kcId,
							title: video.kechengmingcheng,
							description: video.kechengxiangqing,
							views: video.views || 0,
							date: video.createTime || '',
							thumbnail: video.fengmianlujing ? Platform.api_requestUrl + '/' + video.fengmianlujing : ''
						}))
				}
			})
		},
		playVideo(video) {
			let token = uni.getStorageSync('token');
			let permit = this.$storage.get('courseList').indexOf(video.id)>-1;
			if(!token){
				this.messageToggle('error', '请登录后查看!')
				return;
			} else if(!permit){
				this.messageToggle('error', '暂无视频权限!')
				return;
			}
			video.url = video.url ? video : '';
			this.currentVideo = video
			this.fetchVideoDetails(video.id)
		},
		playChapterVideo(chapter) {
			// let token = uni.getStorageSync('token');
			// let permit = this.$storage.get('courseList').indexOf(this.currentVideo.id)>-1;
			// if(!token){
			// 	this.messageToggle('error', '请登录后查看!')
			// 	return;
			// } else if(!permit){
			// 	this.messageToggle('error', '暂无视频权限!')
			// 	return;
			// }

			// this.currentVideo = {
			// 	id: videoId,
			// 	title: videoData.kechengmingcheng,
			// 	description: videoData.kechengxiangqing,
			// 	url: Platform.api_requestUrl + '/common/getVideoUrl?videoPath=' + currentChapter.shipinlujing,
			// 	views: videoData.views || 0,
			// 	date: videoData.createTime || '',
			// 	thumbnail: videoData.fengmianlujing ? Platform.api_requestUrl + '/' + videoData.fengmianlujing : ''
			// }
			this.currentVideo = chapter;
			// this.currentVideo.url = Platform.api_requestUrl + '/common/getVideoUrl?videoPath=' + chapter.shipinlujing;
			// this.currentVideo.id = chapter.id;
		},
		goBack() {
			uni.navigateBack();
		}
	}
}
</script>

<style lang="scss" scoped>
.video-page {
	min-height: 100vh;
	background-color: #f5f5f5;
}

.video-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 88rpx;
	background: linear-gradient(to right, #4a90e2, #5cb3ff);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 30rpx;
	z-index: 100;
	
	.header-left, .header-right {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		
		.iconfont {
			color: #fff;
			font-size: 40rpx;
		}
	}
	
	.header-title {
		color: #fff;
		font-size: 32rpx;
		font-weight: 500;
	}
}

.video-container {
	width: 100%;
	background: #000;
	margin-top: 88rpx;
}

.video-info {
	padding: 20rpx;
	background: #fff;
	margin-bottom: 20rpx;

	.video-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 16rpx;
	}

	.video-stats {
		display: flex;
		margin-bottom: 16rpx;

		.stat-item {
			font-size: 24rpx;
			color: #999;
			margin-right: 20rpx;
		}
	}

	.video-desc {
		font-size: 28rpx;
		color: #666;
		line-height: 1.5;
	}
}

.chapter-list {
	background: #fff;
	padding: 20rpx;
	margin-bottom: 20rpx;

	.chapter-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
		padding-left: 20rpx;
		border-left: 8rpx solid #4a90e2;
	}

	.chapter-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 24rpx 20rpx;
		border-bottom: 1rpx solid #f0f0f0;

		&:last-child {
			border-bottom: none;
		}

		.chapter-item-left {
			display: flex;
			align-items: center;
			flex: 1;

			.chapter-index {
				width: 40rpx;
				height: 40rpx;
				background: #f5f5f5;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
				color: #666;
				margin-right: 20rpx;
			}

			.chapter-info {
				flex: 1;

				.chapter-name {
					font-size: 28rpx;
					color: #333;
					margin-bottom: 8rpx;
					display: block;
				}

				.chapter-duration {
					font-size: 24rpx;
					color: #999;
				}
			}
		}

		.chapter-item-right {
			.play-status {
				font-size: 24rpx;
				color: #4a90e2;
				padding: 8rpx 20rpx;
				border: 1rpx solid #4a90e2;
				border-radius: 30rpx;

				&.active {
					background: #4a90e2;
					color: #fff;
				}
			}
		}
	}
}

.video-list {
	background: #fff;
	padding: 20rpx;

	.list-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
	}

	.video-item {
		display: flex;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #eee;

		&:last-child {
			border-bottom: none;
		}

		.video-thumbnail {
			width: 240rpx;
			height: 160rpx;
			border-radius: 8rpx;
			margin-right: 20rpx;
		}

		.video-item-info {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.video-item-title {
				font-size: 28rpx;
				color: #333;
				font-weight: bold;
				margin-bottom: 8rpx;
			}

			.video-item-desc {
				font-size: 24rpx;
				color: #666;
				line-height: 1.4;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}

			.video-item-stats {
				display: flex;
				margin-top: 8rpx;

				.stat-item {
					font-size: 22rpx;
					color: #999;
					margin-right: 20rpx;
				}
			}
		}
	}
}
</style>